import React from 'react';
import { Button, message, Card, Typography, Space } from 'antd';
import { useAnalysisStore } from '@/stores/analysisStore';
import styles from './index.module.less';

const { Title, Text } = Typography;

const GenerateFiles: React.FC = () => {
  const { analysisResult } = useAnalysisStore();

  const handleDownload = () => {
    if (!analysisResult?.html || !analysisResult?.markdown) {
      message.error('没有可下载的内容');
      return;
    }



    // 生成CSS文件
    const cssContent = `
/* ${analysisResult.theme || 'default'} 主题样式 */
body {
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 这里可以根据选择的主题添加不同的样式 */
${analysisResult.theme === 'dark' ? `
body {
  background-color: #1a1a1a;
  color: #ffffff;
}` : ''}

${analysisResult.theme === 'light' ? `
body {
  background-color: #ffffff;
  color: #333333;
}` : ''}

${analysisResult.theme === 'custom' ? `
body {
  background-color: #f5f5f5;
  color: #2c3e50;
}` : ''}`;

    // 创建下载链接
    const downloadFile = (content: string, filename: string) => {
      const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    };

    // 下载所有文件
    downloadFile(analysisResult?.html, 'index.html');
    downloadFile(cssContent, `styles/${analysisResult.theme || 'default'}.css`);
    downloadFile(analysisResult?.markdown, 'README.md');

    message.success('文件生成成功！');
  };

  return (
    <div className={styles.container}>
      <Card className={styles.card}>
       
          <div className={styles.header}>
            <Text type="secondary">点击下方按钮生成以下文件：</Text>
          </div>

          <div className={styles.fileList}>
            <Card size="small" className={styles.fileItem}>
              <Space>
                <Text strong>index.html</Text>
                <Text type="secondary">- 主页面文件</Text>
              </Space>
            </Card>
            <Card size="small" className={styles.fileItem}>
              <Space>
                <Text strong>styles/{analysisResult?.theme || 'default'}.css</Text>
                <Text type="secondary">- 样式文件</Text>
              </Space>
            </Card>
            <Card size="small" className={styles.fileItem}>
              <Space>
                <Text strong>README.md</Text>
                <Text type="secondary">- 说明文档</Text>
              </Space>
            </Card>
            <div className={styles.footer}>
            <Button 
              type="primary" 
              size="large" 
              onClick={handleDownload}
              disabled={!analysisResult?.html || !analysisResult?.markdown}
              style={{ display: 'block' }}
            >
              生成文件
            </Button>
          </div>
          </div>
      </Card>
    </div>
  );
};

export default GenerateFiles; 